<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->

    <div class="box">
        <p>ppp</p>
        <h1 class="h1">h1</h1>
        <h2>h2</h2>
    </div>

    <script>

        // 事件委托： 把事件委托给别人做   --- 只能委托给祖先元素

        //   为什么
        //      1 页面当中，如果事件处理函数太多，影响页面性能
        //      2 已有的循环事件绑定，无法将来的对象绑定事件

        //   原理：事件冒泡  --- 子元素的事件都会触发父元素的同类型事件

        //   优点：减少事件处理函数 ， 可以给将来的对象绑定事件



        // 
        var oBox = document.querySelector('.box');
        var oP = document.querySelector('p');

        document.addEventListener('click', function (e) {
            // console.log(e.target.tagName);

            if (e.target === oP) {
                console.log('p点击以后要做的事件')
            }
            else if (e.target.className === 'h1') {
                console.log('h1的事件')
            }

            // tagName 返回的是大写的
            else if (e.target.tagName === 'H3') {
                console.log('h3')
            }


        })


        setTimeout(function () {
            var oH3 = document.createElement('h3');
            oH3.innerHTML = 'h3';
            oBox.appendChild(oH3);

        }, 1000)

    </script>

</body>

</html>